<template>
  <view class="pop_imgs" style="background-image: url('https://7072-prod-0gg6hnwgf8f69aeb-1317259555.tcb.qcloud.la/hdurl/%E5%9B%BE%E5%B1%82%201.png')">
    <view class="pop_infos">
      <view>活动期间</view>
      <view v-for="(item, index) in pay" :key="index">{{ item.title }}</view>
    </view>
    <image :src="logo" />
    <view class="pop_time">活动时间：长期有效</view>
    <view class="pop_dtl" @click="todtl">查看详情</view>
  </view>
  <image src="../../static/close.png" class="clone" @click="clone" />
</template>

<script lang="ts" setup>
import { to } from '@/utils/uniapi';
const props = defineProps(['pay', 'logo']);
const emit = defineEmits(['onclone']);
function todtl() {
  to('/user/pay/pay');
}
function clone() {
  emit('onclone');
}
</script>

<style lang="scss" scoped>
.pop_imgs {
  width: 666rpx;
  height: 868rpx;
  background-size: 100%;
  margin: 0 auto;
  margin-top: 90rpx;
  position: relative;
  padding-top: 94rpx;
  box-sizing: border-box;
  background-repeat: no-repeat;
  .pop_infos {
    width: 90%;
    margin: 0 auto;
    height: 300rpx;
    overflow: auto;
    font-size: 50rpx;
    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
    font-weight: 600;
    color: #cd3e35;
    text-align: center;
  }
  image {
    width: 198rpx;
    height: 198rpx;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    margin-top: 46rpx;
  }
  .pop_time {
    font-size: 32rpx;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    margin-top: 14rpx;
  }
  .pop_dtl {
    width: 540rpx;
    height: 100rpx;
    font-size: 56rpx;
    line-height: 100rpx;
    text-align: center;
    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
    font-weight: 600;
    color: #ce3b33;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 60rpx;
  }
}
.clone {
  width: 72rpx;
  height: 72rpx;
  opacity: 1;
  display: block;
  margin: 0 auto;
  margin-top: 26rpx;
}
</style>
